﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/basejs.js"></script>
    <script src="../Scripts/Gridjs.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body >
    <div id="div_tb_box">
        <div>
            <div>
                <ul fm-body>
                    <li>姓名：{{name}}-- 年龄：<span fm-conver="converage">{{age}}</span></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="div_ptb_box1" >
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>标题</th>
                <th>简介</th>
                <th>时间</th>
            </tr>
            <tbody fm-body>
                <tr>
                    <td><a target="_blank" href="/static/html/DetailDemo01.html?id={{Id}}">{{Title}}</a></td>
                    <td fm-conver="converstr">{{Summary}}</td>
                    <td fm-conver="convertime">{{IniTime}}</td>
                </tr>
            </tbody>

        </table>
        <div fm-pagerbox class="pagination"></div>
    </div>
    <input type="button" id="btnreload"  value="reload"/>

    <input type="button" id="btnrefresh" value="refresh" />

    <script>
        
        $(document).ready(function () {
           var data = [{ name: "张三", age: 20 }, { name: "李思", age: 21 }, { name: "王五", age: 22 }];
           var app= $("#div_tb_box").Grid({
               data: data
           });

           //var app2 = $("#div_tb_box").Grid();

           //app2.load(data);

           var app1 = $("#div_ptb_box1").Grid({
               data: data,
               //url: "/articles",//ajax请求路径 与data 同为选选 返回值必须是 {Data:[{},{},{}],Count:100}格式 Data：数据列表,Count:返回数据源的总项数
               //click: function (row) { alert(row.Title) },//单击事件
               dbclick: function (row) {
                   window.open("/static/html/DetailDemo01.html?id="+row.Id);
               },//双击时间
               page:{
                   //click:function(index){alert(index)},//分页事件
                   pageSize: 5,//可选 (默认30)
                   pageIndex: 0,//可选 (默认1)
                   reqindex: "index",//url请求中的起始页 可选 (默认 pageindex )
                   reqsize: "size",//url请求中的每页大小 可选 (默认 pagesize )
                   back: "上一页",//可选 (默认 <)
                   next: "下一页", //可选 (默认 >)
                   lazy: { count: 100, url: "/articles" }//后加载项，
               }
           });
            //app1.reload();
           $("#btnreload").click(function () {
               app1.reload();//刷新整个grid
           });

           $("#btnrefresh").click(function () {
               app1.refresh();//刷新当前分页
           });

        });

        

        function converage(obj) {
            return obj + "岁";
        }

        function convertime(obj) {
            return obj.substring(0,10);
        }

        function converstr(obj){
            return obj.substring(0,30);
        }
    </script>
</body>

</html>
